<template>
    <div class="movie-view has-header">
        <template v-if="isShowLoading">
            <Loading></Loading>
        </template>
        <template v-else>
            <scroller title="最受关注的图书 | 虚构类" type="hasCover" :items="novel.books"></scroller>
            <scroller title="最受关注的图书 | 非虚构类" type="hasCover" :items="reality.books"></scroller>
            <scroller title="纸书" type="hasCover" :items="reality.books">
                <!-- 插槽 start -->
                <div class="promItem" slot="promItem">
                    <img class="corver" src="../assets/book_zw.jpg" alt="">
                    <div class="content">
                        <span class="price">¥ 68</span>
                        <p class="name">造物</p>
                        <p class="info">改变世界的万物图典，3000幅图里的发明与冒险</p>
                    </div>
                </div>
                <!-- 插槽 end -->
            </scroller>
            
            <!-- <scroller title="发现好书" type="onlyString" :items="bookTags"></scroller> -->
            <Types></Types>
            <DownloadApp></DownloadApp>
        </template>
    </div>
    
</template>

<script>
import { mapState } from "vuex";
import Scroller from "../components/Scroller"
import Loading from '../components/Loading'
import Types from '../components/Types'
import DownloadApp from '../components/DownloadApp'

export default {
    name: "book-view",
    components: { Scroller, Loading, DownloadApp, Types},
    data() {
        return {
            isShowLoading: true
        };
    },
    computed: {
        // Getting Vuex State from store/modules/book
        ...mapState({
            novel: state => state.book.novel,
            reality: state => state.book.reality,
            travel: state => state.book.travel        
        })
    },
    methods: {
        // Dispatching getBook
        getBook: function() {
            this.$store.dispatch("getBook").then((res) => {
                this.isShowLoading = false;
            });
        }
    },
    created: function() {
        // Getting books data on created
        this.getBook();
    }
};
</script>

<style lang="scss" scoped>
.promItem {
    overflow: hidden;
    margin: 1.6rem 1.8rem 0.8rem 1.6rem;
}
.corver {
    width: 10rem;
    float: left;
    margin-right: 1.5rem;
}
.content {
    .price {
        float: right;
        color: red;
        font-size: 1.6rem;
        line-height: 2.2rem;
    }
    .name {
        font-size: 2rem;
        color: #494949;
        margin: 1rem;
        overflow: hidden;
        max-width: 100%;
        text-overflow: ellipsis;
        white-space: nowrap;
        word-wrap: normal;
        line-height: 2.2rem;
    }
    .info {
        font-size: 1.3rem;
        font-weight: 300;
        line-height: 1.5;
        color: #9b9b99;
    }
}
</style>
